<template>
	<view>
		<view class="cart-goods-item" v-for ="(item,index) in CartList" :key="index">
			<view class="selected" @click="select(index)">
				<uni-icons v-if="!item.goodsSelected" type="circle" size="30"></uni-icons>
				<uni-icons v-if="item.goodsSelected" type="checkbox-filled" size="30" color="#00ed0c"></uni-icons>
			</view>
			<view>
				<image v-if="CartList!==[]" :src="item.goodsInfo.goodsPic" style="width: 200rpx; height: 200rpx;"></image>
			</view>
			<view class="cart-item-desc">
				<view style="display: flex; justify-content: space-between;">
					<view style="margin-left: 30rpx;">
						<p style="font-size: 26rpx;">{{item.goodsInfo.goodsName}}</p>
						<view class="t-tag" style="color: #00ed0c; margin-top: 10rpx;">
							<text>{{item.goodsInfo.type==1?'文创商品':'当地特产'}}</text>
						</view>
					</view>
					<view>
						<uni-icons type="trash" size="30" @click="delGoods(item.goodsId,index)"></uni-icons>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between;">
					<view class="t-goods-price">
						<text class="t-rmb">¥</text>
						<text class="t-p1">{{ item.goodsInfo.goodsPrice}}</text>
						<text class="t-p2">¥{{item.goodsInfo.goodsOriginPrice}}</text>
					</view>
					<view class="add-sub">
						<uni-icons type="minus" size="30" @click="sub(index)"></uni-icons>
						<view style="text-align: center; margin-top: 8rpx;">
							<text>{{item.goodsNum}}</text>
						</view>
						<uni-icons type="plus" size="30" @click="add(index)"></uni-icons>
					</view>
					
				</view>
			</view>
		</view>
		<view class="cart-check" @click="selectAll()">
			<view style="display: flex;">
				<uni-icons v-if="!isAll" type="circle" size="30"></uni-icons>
				<uni-icons v-if="isAll" type="checkbox-filled" size="30" color="#00ed0c"></uni-icons>
				<view style="margin-top: 10rpx;">全选</view>
			</view>
			<view style="display: flex;">
				<view style="margin-top: 5rpx;">合计：</view>
				
				<view class="t-p1" style="margin-bottom: 0rpx; text-align: center;"><text style="font-size: 33rpx; margin-right: 10rpx;">¥</text> {{ allPrice}}</view>
			</view>
			<view style="margin-right: 20rpx;margin-bottom: 30rpx;" @click="Pay1()">
				<fui-button radius="30rpx" btnSize="mini" style="height: 50rpx;" background="#00ed0c" @click="Pay1()">立即结算</fui-button>
			</view>
		</view>
	</view>
</template>

<script>
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	export default {
		components:{
			fuiButton
		},
		data() {
			return {
				isAll:false,
				allPrice:0,
				//如果没有商品
				isEmpty:false,
				CartList:[{
					userId:1,
					cartId:1,
					goodsId:1,
					goodsSelected:false,
					goodsInfo:{
						goodsId:1,
						goodsPic: ' ',
						goodsName: 'Helmetphone MT1 Neo智能骑行头盔(山地/框宽度）',
						goodsDesc: '一键语音',
						type:2,
						goodsPrice: 59,
						goodsOriginPrice: 89,
					},
					goodsNum:1
				},
				{
					userId:1,
					cartId:2,
					goodsId:2,
					goodsSelected:false,
					goodsInfo:{
						goodsId:2,
						goodsPic: '/static/goods/11.jpg',
						goodsName: 'Helmetphone MT1 Neo智能骑行头盔(山地/框宽度）',
						goodsDesc: '一键语音',
						type:2,
						goodsPrice: 69,
						goodsOriginPrice: 89,
					},
					goodsNum:1
				},
				]
			}
		},
		onLoad()
		{
			this.init()
		},
		methods: {
			Pay1(){
				var selectedData = []
				selectedData = this.CartList.filter(item=>{
					return item.goodsSelected===true
				})
				console.log(selectedData)
				if(selectedData.length===0){
					uni.showToast({
						title: '请勾选商品',
						icon:'none',
						duration: 1000
					})
					console.log("到这了pay1")
					return 
				}
				else{
					//@todo  创建订单，发起请求，将订单信息存入数据库 
					//.....................
					this.$store.commit("setSelectedData",selectedData)
					uni.navigateTo({
						url:"/pages/create-order/create-order"
					})
					
				}
			},
			init()
			{
				this.CartList = []
				this.request({
					url:"/cart",
					method:'GET',
					data:{
						
					}
				}).then(res=>{
					if(res.code==='1'){
						console.log("成功")
						if(res.data!==null)
						this.CartList = res.data
						else
						this.CartList = []
						for(var i = 0; i<=this.CartList.length;i++)
						{
							this.CartList[i].goodsSelected = false
							console.log("运行了")
						}
					}
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				})
				console.log("到这了")
				
						
			},
			delGoods(goodsId,index){
				this.request({
					url:"/cart",
					method:'DELETE',
					data:{
						cartId:this.CartList[index].cartId
					}
				}).then(res=>{
					if(res.code==='1'){
						console.log("成功")
						this.CartList = this.CartList.filter(item=>{
							return item.goodsId!=goodsId
					})
					}
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				})
				
			},
			
			select(index){
				
				this.request({
					url:"/cart",
					method:'PUT',
					data:{
					     cartId:this.CartList[index].cartId,
						 goodsSelected:this.CartList[index].goodsSelected
					}
					
				}).then(res=>{
					if(res.code==='1'){
						console.log("成功")
						this.CartList[index].goodsSelected = !this.CartList[index].goodsSelected
						if(this.CartList[index].goodsSelected){
							this.allPrice = this.allPrice+this.CartList[index].goodsInfo.goodsPrice*this.CartList[index].goodsNum
							this.allPrice = Math.round(this.allPrice*100)/100
						}
						else{
							this.allPrice = this.allPrice-this.CartList[index].goodsInfo.goodsPrice*this.CartList[index].goodsNum;
							this.allPrice = Math.round(this.allPrice*100)/100
							if(this.allPrice<0){
								this.allPrice=0
							}
					}
					}
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				})
				
				
			},
			sub(index){
				if(this.CartList[index].goodsNum>1){
					this.request({
						url:"/cart/sub",
						method:'PUT',
						data:{
						     cartId:this.CartList[index].cartId,
						},
						
					}).then(res=>{
						if(res.code==='1'){
							this.CartList[index].goodsNum--
							if(this.CartList[index].goodsSelected){
								this.allPrice = this.allPrice - this.CartList[index].goodsInfo.goodsPrice
								this.allPrice = Math.round(this.allPrice*100)/100
							}
						}
						else{
							console.log("失败")
						}
					}).catch(()=>{
						console.log("系统错误")
					})
					
					//发送请求，更新数据库
					
				}
				
			},
			add(index){
				
				if(this.CartList[index].goodsNum<=99){
					//发送请求更新数据库
					this.request({
						url:"/cart/add",
						method:'PUT',
						data:{
						     cartId:this.CartList[index].cartId
						},
						
					}).then(res=>{
						if(res.code==='1'){
							console.log("成功")
							this.CartList[index].goodsNum++
							if(this.CartList[index].goodsSelected){
								this.allPrice = this.allPrice + this.CartList[index].goodsInfo.goodsPrice
								this.allPrice = Math.round(this.allPrice*100)/100
						}
						}
						else{
							console.log("失败")
						}
					}).catch(()=>{
						console.log("系统错误")
					
					})
					
				
				}
			},
			selectAll(){
				this.request({
					url:"/cart/all",
					method:'GET',
					data:{
					     isAll:this.isAll
					},
					
				}).then(res=>{
					if(res.code==='1'){
						this.isAll = !this.isAll
						var sum = 0
						if(this.isAll){
							for(var i = 0; i<this.CartList.length;i++){
								this.CartList[i].goodsSelected =true
								sum = sum + this.CartList[i].goodsInfo.goodsPrice*this.CartList[i].goodsNum
							}
						}
						
						else{
							for(var i = 0; i<this.CartList.length;i++){
								this.CartList[i].goodsSelected =false
								
							}
						}
						
						this.allPrice = sum
						this.allPrice = Math.round(this.allPrice*100)/100
						}
					
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				})
				
				
			}
			
		},
		
	}
</script>

<style 
lang="scss"
scoped>
.t-tag {
						font-size: 20rpx;
						border-radius: 4rpx;
						border: 1rpx solid;
						box-sizing: border-box;
						padding: 3rpx 5rpx;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						float: left;
						word-break: break-all;

						&:not(:last-child) {
							margin-right: 8rpx;
						}
					}
.t-goods-price {
					
					margin-left: 20rpx;
					padding: 0rpx 18rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					
					width: 100%;

					.t-rmb {
						font-size: 30rpx;
						color: #00de0d;
					}

					.t-p1 {
						font-size: 42rpx;
						color: #00de0d;
						margin-left: 4rpx;
						font-weight: bold;
					}

					.t-p2 {
						font-size: 20rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
					}
				}
.t-p1 {
						font-size: 42rpx;
						color: #00de0d;
						margin-left: 4rpx;
						font-weight: bold;
					}
.t-p2 {
						font-size: 20rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
					}
.add-sub {
	display: flex;
	width: 200rpx;
	margin-left: 24rpx;
}
.add-sub text{
	text-align: center;
	margin-bottom: 10rpx;
}
.cart-goods-item {
	display: flex;
	justify-content: space-around;
	padding-bottom: 30rpx;
	padding-top: 24rpx;
	border-bottom: #f1f1f1 solid 2rpx;
}
.cart-check{
	width: 100%;
	position: fixed;
	bottom: 0rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
